<template>
  <module
    ref="module"
    class="personnel-access-details"
    :borderConfig="borderConfig"
    :moduleConfig="moduleConfig"
    :barLineConfigTop="barLineConfigTop"
    :barLineConfigBottom="barLineConfigBottom">
  </module>
</template>

<script>
import Module from './../components/Module.vue'
export default {
  name: 'personnelAccessDetails',
  components: {
    Module
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '人员出入详情',
        goPageUrl: '',
        organType: this.$store.state.moduleList[29].organType
      },
      moduleConfig: {
        isOctagon: false, // 是否需要头部的八边形
        topType: '1', // 第一层显示内容
        bottomType: '1' // 第二层显示内容
      },
      barLineConfigTop: {
        title: {
          text: '今日入园人数走势图'
        },
        axis: {
        },
        yAxis: {},
        xAxis: {
          axisLabel: {
            interval: 0
          },
          data: []
        },
        config: {
          barWidth: 30
        },
        tooltipsConfig: {
          tipsColor: ['#00C272']
        },
        seriesData: []
      },
      barLineConfigBottom: {
        title: {
          text: '今日入园人数趋势图(人)'
        },
        axis: {
          yAxisConversion: '', // Y轴坐标%
          xAxisLabelInterval (index, name) {
            if (index % 2 === 1) {
              return name
            }
          }
        },
        yAxis: {},
        xAxis: {
          data: []
        },
        tooltipsConfig: {
          tipsColor: ['#f29f46']
        },
        seriesData: []
      },
      information: {}, // 数据
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    },
    organType () {
      return this.$store.state.moduleList[29].organType
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.wisdomParkApi.personAccess({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            this.information = res.data.data
          } else {
            this.information = {}
            this.$parent.showTips('请求失败，点击确认继续刷新')
          }
          if (!isRefresh) {
            this.handleData()
          }
        }, res => {
          this.information = {}
          this.$parent.showTips('请求失败，点击确认继续刷新')
          if (!isRefresh) {
            this.handleData()
          }
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      } else {
        this.handleData()
      }
    },
    handleData () {
      let data = this.information
      let seriesData = []
      let xData = []
      let seriesData1 = []
      let xData1 = []
      if (JSON.stringify(data) !== '{}') {
        data.areaCount.forEach(item => {
          xData.push(item.name)
          seriesData.push(Number(item.count))
        })
        data.nowDayTrend.forEach(item => {
          xData1.push(item.name)
          seriesData1.push(Number(item.count))
        })
      }
      this.barLineConfigTop.xAxis.data = xData
      this.barLineConfigTop.seriesData = [{
        data: seriesData,
        name: '',
        colorIndex: 3,
        isBar: true
      }]
      this.barLineConfigBottom.xAxis.data = xData1
      this.barLineConfigBottom.seriesData = [{
        data: seriesData1,
        name: '',
        colorIndex: 2,
        isBar: false
      }]
    },
    resizeChart () {
      if (this.$refs.module) {
        this.$refs.module.resizeChart()
      }
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.personnelAccessDetailsTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.personnelAccessDetailsTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.personnelAccessDetailsTimer)
  },
  watch: {
    organType (val) {
      this.borderConfig.organType = val
    }
  }
}
</script>
<style lang="scss" scoped>
.personnel-access-details {
  & /deep/ .module {
    // padding-top: 1.6%;
  }
  .module-content {
    width: 100%;
    height: 100%;
  }
  .module-left {
    width: 70%;
    height: 100%;
    float: left;
  }
  .module-right {
    width: 30%;
    height: 65%;
    transform: translate(0, 46%);
    float: left;
    position: relative;
    & /deep/ .singleRing-title {
      position: absolute;
      left: 0;
      bottom: 4%;
      color: #fff;
    }
  }
}
</style>
